<template>
  <div class="left-top-wrap">
    <div class="filter-wrap">
      <Row>
        <i-col :span="12">
          <RadioGroup :value="errorType" size="small" @on-change="handleErrorType">
            <Radio :label="1" border>1类异常</Radio>
            <Radio :label="2" border>2类异常</Radio>
          </RadioGroup>
        </i-col>
        <i-col :span="12">
          <Button size="small" key="hy" class="filter-btn" type="warning" @click="handleTqClick">行业查询</Button>
          <Button size="small" key="cs" class="filter-btn" type="info" @click="handleSetParams">参数设置</Button>
        </i-col>
      </Row>
    </div>
    <!-- 行业查询 -->
    <Modal
      v-model="tqVisible"
      class="clear-body-padding"
      title="行业查询"
      width="96%"
      @on-cancel="handleTqModalCancel"
      :styles="{ top: '30px', height: '85%' }"
    >
      <div
        :id="id()"
        :is="tradeQueryTpl"
        :fetchData="fetchTreeMap"
        :chartData="treeMapData"
        @q-click="handleTreeMapClick"
      ></div>
    </Modal>
    <!-- 参数设置 -->
    <Modal class="modal-p10" v-model="paramsVisible" title="参数设置" width="360" @on-cancel="handleSetParamsCancel">
      <Form :model="paramsForm" ref="paramsForm" label-position="top">
        <FormItem label="时间范围" prop="days">
          <InputNumber v-model="paramsForm.days" placeholder="时间范围" style="width:100%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="handleSaveSetParams">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { each, merge } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import { eTreemapOptions } from './chartOptions'
const { mapActions, mapState } = createNamespacedHelpers('spareGas')

export default {
  name: 'spare-gas-left-top',
  components: {
    ETreemap: () => import('@/commons/charts/ETreemap')
  },
  data() {
    return {
      tqVisible: false,
      tradeQueryTpl: null,
      paramsVisible: false,
      paramsForm: {
        days: 0
      }
    }
  },
  computed: {
    ...mapState(['treeMapList', 'errorType']),
    id() {
      return nanoid
    },
    treeMapData() {
      const _serList = []
      each(this.treeMapList, item => {
        const { count, meterGasClass } = item
        _serList.push({
          name: meterGasClass,
          value: count
        })
      })
      return merge({}, eTreemapOptions, {
        series: [
          {
            data: _serList
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions([
      'loadTableData',
      'loadTreeMapData',
      'changeCurrentMeterId',
      'changeStopTableKeyUp',
      'changeErrorType',
      'changeTablePageNum',
      'changeCurrentGasCls',
      'loadSetParams',
      'loadGetParams'
    ]),
    /**
     * desc: 行业查询用户点击
     * param {type}
     * return {type} void
     */
    handleTqClick() {
      this.changeStopTableKeyUp(true)
      this.tqVisible = true
      this.tradeQueryTpl = 'ETreemap'
    },
    handleTqModalCancel() {
      this.tqVisible = false
      this.tradeQueryTpl = null
      this.changeStopTableKeyUp(false)
    },
    fetchTreeMap() {
      this.loadTreeMapData()
    },
    /**
     * desc: 行业查询
     * param {type}
     * return {type} void
     */
    handleTreeMapClick(params) {
      const { data = {} } = params
      const { name } = data
      this.changeTablePageNum(1)
      this.changeCurrentGasCls(name)
      this.loadTableData({
        meterGasClass: name
      })
      this.changeCurrentMeterId()
      this.handleTqModalCancel()
    },
    handleErrorType(val) {
      this.changeErrorType(val)
      this.changeTablePageNum(1)
      this.changeCurrentGasCls()
      this.loadTableData()
    },
    handleSetParams() {
      this.getParams()
      this.paramsVisible = true
    },
    async handleSaveSetParams() {
      const {
        days
      } = this.paramsForm
      const { code, msg } = await this.loadSetParams({
        days: parseInt(days) || 0
      })
      if (code === 200) {
        this.$Message.success(msg)
      } else {
        this.$Message.error(msg)
      }
      this.handleSetParamsCancel()
    },
    handleSetParamsCancel() {
      this.paramsVisible = false
      this.$refs['paramsForm'].resetFields()
    },
    async getParams() {
      const { code, date } = await this.loadGetParams()
      if (code === 200) {
        this.paramsForm = {
          ...this.paramsForm,
          ...date
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.left-top-wrap {
  .filter-btn {
    margin-right: 10px;
  }
}
</style>
